<template>
  
    <link rel="stylesheet" href="/assets/css/coupon.css" />
    <!-- 顶部标题 -->
    <van-nav-bar
      title="我的优惠券列表"
      left-text="返回"
      left-arrow
      @click-left="onBack"
    />
    <!-- 导航标签 -->
  
    <van-tabs active @click-tab="onClickTab">
      <van-tab title="全部" data-value=""></van-tab>
      <van-tab title="未使用" data-value="1"></van-tab>
      <van-tab title="已使用" data-value="2"></van-tab>
      <van-tab title="已失效" data-value="0"></van-tab>
      <van-tab title="未生效" data-value="3"></van-tab>
    </van-tabs>
  
    <!-- 优惠券列表 -->
  
    <div class="coupon_list">
      <div class="coupon_item" v-for="item in couponList" :key="item.id">
        <div class="item_content">
          <router-link to="#">
            <div class="left">
              {{ item.coupon.rate * 100 }}<span>折</span>
            </div>
            <div class="right">
              <div>新店优惠券</div>
              <div>
                订单满<span>100元</span>打<span>
                  {{ item.coupon.rate * 100 }}折</span
                >
              </div>
              <div>每人限领1张</div>
              <div>
                领取后{{
                  parseInt(
                    (item.coupon.endtime -
                      item.coupon.createtime) /
                      (24 * 60 * 60)
                  )
                }}天内有效
              </div>
            </div>
          </router-link>
        </div>
  
        <van-button
          :type="
            item.status == 0
              ? 'default'
              : item.status == 1
              ? 'primary'
              : item.status == 2
              ? 'default'
              : 'warning'
          "
          size="small"
          class="buttonType"
        >
          {{
            item.status === "0"
              ? "已失效"
              : item.status === "1"
              ? "未使用"
              : item.status === "2"
              ? "已使用"
              : "未生效"
          }}
        </van-button>
      </div>
    </div>
  </template>
  <script setup>
  import { getCurrentInstance, onBeforeMount } from "vue";
  
  const { proxy } = getCurrentInstance();
  
  // 获取当前登录用户id
  let id = proxy.$business.value.id;
  // 定义搜索条件
  const status = ref("");
  
  const couponList = ref([]);
  
  // 未挂载前请求函数
  onBeforeMount(() => {
    getCouponList();
  });
  
  // 获取优惠券
  const getCouponList = async () => {
    let data = {
      id,
      status: status.value,
    };
    // 发起请求
    let result = await proxy.$post({
      url: "business/base/mycoupon",
      params: data,
    });
  
    if (result.code === 1) {
      couponList.value = result.data;
      console.log(couponList.value);
      return false;
    } else {
      proxy.$warnNotify({
        message: result.msg,
        duration: 500,
      });
      return false;
    }
  };
  
  // 点击导航时触发事件
  const onClickTab = (e) => {
    if (e.title == "全部") {
      status.value = "";
    }
    if (e.title == "未使用") {
      status.value = "1";
    }
    if (e.title == "已使用") {
      status.value = "2";
    }
    if (e.title == "已失效") {
      // "0" 后端接收有""干扰，故赋值"4"
      status.value = "4";
    }
    if (e.title == "未生效") {
      status.value = "3";
    }
    // 先清空页面内容再重新调用
    couponList.value = [];
    getCouponList();
  };
  // 返回上一级
  const onBack = () => {
    proxy.$router.back();
  };
  </script>